<template>
<div class="shop-car">
      <mt-header title="购物车" :fixed="isFixed">
        	<router-link to="" slot="left">
          		<div class="iconfont" @click="goback">&#xe603;</div>
        	</router-link>
        	<router-link to="" slot="right">
        		<div class="shop-car iconfont">&#xe601;</div>
      		</router-link>
      </mt-header>
      <div class="kong"></div>
    <div class="shopcar">
      	<div class="cartit">
      		<a class="round" href="#"></a>
      		<p class="xiuguan">秀观唐服饰旗舰店</p>
      		<a class="arrows" href="#"></a>
      		<span class="shijian">2015-12-11  8:22</span>
      	</div>
      	<div class="tpxq">
      		<div class="tul">
      			<a class="round1" href="#"></a>
      			<img class="tupian" src="../../assets/img/images/transport1.jpg" alt="">
      		</div>
      		<div class="tur">
      			<h4 class="sipao">秀观唐复古真丝旗袍</h4>
      			<p>颜色分类：黑底印花</p>
      			<p>尺码：M</p>
      			<p class="jiaqian"><i>￥295.0</i><span>￥395.0</span></p>
      			<h6 class="jiaqian">
      				<a class="lf" href="#">+</a>
      				<input type="text" placeholder="1">
      				<a class="rt" href="#">-</a>
      				<a class="del" href="#">删除</a>
      			</h6>
      		</div>
      	</div>
    </div>
    <div class="shopcar">
      	<div class="cartit">
      		<a class="round" href="#"></a>
      		<p class="xiuguan">安婷妮菲服饰旗舰店</p>
      		<a class="arrows" href="#"></a>
      		<span class="shijian">2015-12-11  8:22</span>
      	</div>
      	<div class="tpxq">
      		<div class="tul">
      			<a class="round1" href="#"></a>
      			<img class="tupian" src="../../assets/img/images/transport2.jpg" alt="">
      		</div>
      		<div class="tur">
      			<h4 class="sipao">安婷妮菲中长袖棉麻旗袍</h4>
      			<p>颜色分类：米白色</p>
      			<p>尺码：M</p>
      			<p class="jiaqian"><i>￥295.0</i><span>￥395.0</span></p>
      			<h6 class="jiaqian">
      				<a class="lf" href="#">+</a>
      				<input type="text" placeholder="1">
      				<a class="rt" href="#">-</a>
      				<a class="del" href="#">删除</a>
      			</h6>
      		</div>
      	</div>
    </div>
    <div class="shopcar">
      	<div class="cartit">
      		<a class="round" href="#"></a>
      		<p class="xiuguan">创彩服饰旗舰店</p>
      		<a class="arrows" href="#"></a>
      		<span class="shijian">2015-12-11  8:22</span>
      	</div>
      	<div class="tpxq">
      		<div class="tul">
      			<a class="round1" href="#"></a>
      			<img class="tupian" src="../../assets/img/images/transport3.jpg" alt="">
      		</div>
      		<div class="tur">
      			<h4 class="sipao">创彩加厚真丝旗袍</h4>
      			<p>颜色分类：粉色</p>
      			<p>尺码：M</p>
      			<p class="jiaqian"><i>￥295.0</i><span>￥395.0</span></p>
      			<h6 class="jiaqian">
      				<a class="lf" href="#">+</a>
      				<input type="text" placeholder="1">
      				<a class="rt" href="#">-</a>
      				<a class="del" href="#">删除</a>
      			</h6>
      		</div>
      	</div>
    </div>
    <div class="shopcar">
      	<div class="cartit">
      		<a class="round" href="#"></a>
      		<p class="xiuguan">倚风复古旗袍旗舰店</p>
      		<a class="arrows" href="#"></a>
      		<span class="shijian">2015-12-11  8:22</span>
      	</div>
      	<div class="tpxq">
      		<div class="tul">
      			<a class="round1" href="#"></a>
      			<img class="tupian" src="../../assets/img/images/transport4.jpg" alt="">
      		</div>
      		<div class="tur">
      			<h4 class="sipao">倚风长袖棉麻旗袍</h4>
      			<p>颜色分类：浅紫色黑花</p>
      			<p>尺码：M</p>
      			<p class="jiaqian"><i>￥295.0</i><span>￥395.0</span></p>
      			<h6 class="jiaqian">
      				<a class="lf" href="#">+</a>
      				<input type="text" placeholder="1">
      				<a class="rt" href="#">-</a>
      				<a class="del" href="#">删除</a>
      			</h6>
      		</div>
    	</div>
    </div>
    <div class="shopcar">
      	<div class="cartit">
      		<a class="round" href="#"></a>
      		<p class="xiuguan">秀观唐服饰旗舰店</p>
      		<a class="arrows" href="#"></a>
      		<span class="shijian">2015-12-11  8:22</span>
      	</div>
      	<div class="tpxq">
      		<div class="tul">
      			<a class="round1" href="#"></a>
      			<img class="tupian" src="../../assets/img/images/transport1.jpg" alt="">
      		</div>
      		<div class="tur">
      			<h4 class="sipao">秀观唐复古真丝旗袍</h4>
      			<p>颜色分类：黑底印花</p>
      			<p>尺码：M</p>
      			<p class="jiaqian"><i>￥295.0</i><span>￥395.0</span></p>
      			<h6 class="jiaqian">
      				<a class="lf" href="#">+</a>
      				<input type="text" placeholder="1">
      				<a class="rt" href="#">-</a>
      				<a class="del" href="#">删除</a>
      			</h6>
      		</div>
      	</div>
   	</div>
   	<div class="jiesuan">
   		<div class="guan">
   		<a class="round2" href="#"></a>
   		<span>全选</span>
   		</div>
   		<div class="heji">
   		<p>合计:<span class="yuan">0</span>元</p>
   		</div>
   		<div class="yunfei">
   			<p>包含运费:<span>0</span>元</p>
   		</div>
   		<div class="jiesuan1">
            <a href="#">结算</a>
        </div>
   	</div>
</div>
</template>

<script>
    export default {
        name: "ShopCar",
        data(){
          return{
            isFixed:true,
          }
        },
      methods:{
  			goback(){
  				this.$router.go(-1)
  			}
		}
    }
</script>

<style scoped>
header{
    border-color: #111;
    background-color: #581513;
    color: #fff;
  }
  .kong{
  	height:40px;
  }
  .shopcar{
    padding: 10px 10px 0 10px;
  }
  .cartit{
  	border-radius: 4px 4px 0 0;
    background-color: #f6e0c2;
    height: 20px;
  }
  .round{
  	display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,1.0);
    margin: 5px 10px;
  }
  .round1{
  	display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,1.0);
    margin: 48px 10px;
  }
  .xiuguan{
  	display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #3b0807;
    height: 20px;
    line-height: 20px;
  }
  .arrows{
  	display: inline-block;
    vertical-align: top;
    height: 10px;
    width: 5px;
    background: url(../../assets/img/images/arrows.png) no-repeat 0 0;
    -webkit-background-size: 5px 10px;
    background-size: 5px 10px;
    margin: 5px 10px;
  }
  .shijian{
  	display: inline-block;
    vertical-align: top;
    font-size: 10px;
    color: #3b0807;
    height: 20px;
    line-height: 20px;
    float: right;
    margin-right: 10px;
  }
  .tpxq{
  	border-radius: 4px 4px 0 0;
    background-color: #dcc3a8;
    border-radius: 0 0 4px 4px;
  }
  .tul{
  	display: inline-block;
    vertical-align: top;
    width: 99px;
    height: 106px;
    padding: 4px 0 10px 0;
    letter-spacing: 0px;
    font-size: 0px;
  }
  .tupian{
  	display: inline-block;
    vertical-align: top;
    width: 69px;
    height: 106px;
  }
  .tur{
  	display: inline-block;
    vertical-align: top;
    letter-spacing: 0px;
    font-size: 0px;
    padding: 10px 10px 10px 0;
  }
  .sipao{
  	font-size: 13px;
    font-weight: normal;
    color: #3b0807;
    height: 13px;
    line-height: 13px;
    padding-bottom: 5px;
  }
  .tur p{
  	font-size: 10px;
    color: #4c4c4c;
    line-height: 15px;
    height: 15px;
  }
  .tur p i{
  	display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #3b0807;
    line-height: 15px;
    font-style: normal;
  }
  .tur p span{
  	display: inline-block;
    vertical-align: top;
    font-size: 11px;
    color: #3b0807;
    line-height: 19px;
    font-style: normal;
    text-decoration: line-through;
    padding-left: 15px;
  }
  .lf{
  	display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255,255,255,0.3);
    box-sizing: border-box;
    background-color: rgba(255,255,255,0);
    margin-right: 10px;
    text-align: center;
    line-height: 13px;
    font-size: 11px;
    color: #fff;
  }
  .tur h6 input{
  	display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255,255,255,0.3);
    box-sizing: border-box;
    background-color: rgba(255,255,255,0);
    margin-right: 10px;
    text-align: center;
    line-height: 13px;
    font-size: 11px;
    color: #fff;
  }
  .rt{
  	display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255,255,255,0.3);
    box-sizing: border-box;
    background-color: rgba(255,255,255,0);
    margin-right: 10px;
    text-align: center;
    line-height: 13px;
    font-size: 11px;
    color: #fff;
  }
  .del{
    width: 35px;
    border-radius: 2px;
    background-color: #f6e0c2;
    text-align: center;
    line-height: 15px;
    font-size: 10px;
    color: #4c4c4c;
    float: right;
    margin-left:130px;
    opacity: 0.8;
  }
  .jiaqian{
  	padding-top:15px;
  }
  .jiesuan{
  	width: 100%;
    background-color: #995d45;
    height: 40px;
    margin-top:15px;
    line-height: 40px;
    height: 40px;
    color: #f6e0c2;
    letter-spacing: 0px;
  }
  .round2{
  	display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,1.0);
    margin: 15px 5px 15px 20px;
  }
  .jiesuan span{
  	display: inline-block;
    vertical-align: top;
    font-size: 14px;
  }
  .jiesuan p{
  	font-size: 14px;
  }
  .guan{
  	display: inline-block;
    vertical-align: top;
    font-size: 0px;
    letter-spacing: 0px;
  }
  .yuan{
  	display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #e7160f;
    padding: 0px 5px;
  }
  .heji{
  	display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-size: 0px;
    letter-spacing: 0px;
    padding: 0px 15px 0px 8px;
  }
  .yunfei{
  	display: inline-block;
    vertical-align: top;
    font-size: 0px;
    letter-spacing: 0px;
  }
  .yunfei p{
  	font-size:14px;
  }
  .yunfei span{
  	display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #e7160f;
    padding: 0px 5px;
  }
  .jiesuan1{
  	display: inline-block;
    vertical-align: top;
    font-size: 0px;
    letter-spacing: 0px;
    float: right;
  }
  .jiesuan1 a{
  	display: block;
    font-size: 14px;
    color: #f6e0c2;
    width: 75px;
    background-color: #e7160f;
    text-align: center;
  }
</style>
